'use strict'

// function Student(name){
//     this.name=name;
// }

// Student.prototype.hello=function(){
//     console.log('Hello,' + this.name + '!');
// }

// //用class 定义一个函数

// class Student{
//     constructor(name){
//         this.name=name;
//     }

//     hello(){
//         console.log('Hello,' + this.name +'!');
//     }
// }

// //class继承

// class PrimaryStudent extends Student{
//     constructor(name,grade){
//         super(name);
//         this.grade=grade;
//     }

//     myGrade(){
//         console.log('dfasdf' + this.grade);
//     }
// }

//浏览器对象

console.log('window inner size:' + window.innerWidth + 'x' + window.innerHeight);

// 5.document

  document.title='蜀道难，难于上青天';

  var menu=document.getElementById('drink-menu');

  var drinks=document.getElementsByTagName('dt');

  var i,s;

  s='提供的饮料有：';
  for(i=0;i<drinks.length;i++){
       s=s+drinks[i].innerHTML + ',';
  }

    console.log(s);

  console.log(menu);
  console.log(drinks);

  // 更新DOM 

  // // 获取<p id ="p-id"> ..</p>
  // var p = document.getElementById('p-id');
  // //设置文本为abc:
  // p.innerHTML='ABC';
  // //设置HTML:
  // p.innerHTML='ABC <span style="color:red">RED</span> XYZ';

  //-----------------------------------------

  // 第二种是修改 innerText或textContent属性
  
  // 获取<p id="p-id">...</p>
  // var p=document.getElementById('p-id');
  // // 设置文本：
  // p.innerText ='<script>alert("Hi")</script>';
  // // HTML被自动编码，无法设置一个<script>节点：

  // //--------------------------------------
  // // 还有就是 JavaScript中修改要改写成驼峰式命名:
  // var p=document.getElementById('p-id');
  // //设置CSS：
  // p.style.color='#ff0000';
  // p.style.fontSize='20px';
  // p.style.paddingTop='2em';

//----------- 练习

// // 获取<p>javascript</p>节点:
// var js = document.getElementById('test-js');

// // 修改文本为JavaScript:
// // TODO:
// js.innerHTML='JavaScript';

// // 修改CSS为: color: #ff0000, font-weight: bold
// // TODO:
// js.style.color='#ff0000';
// js.style.fontWeight='bold';

// // 测试:
// if (js && js.parentNode && js.parentNode.id === 'test-div' && js.id === 'test-js') {
//     if (js.innerText === 'JavaScript') {
//         if (js.style && js.style.fontWeight === 'bold' && (js.style.color === 'red' || js.style.color === '#ff0000' || js.style.color === '#f00' || js.style.color === 'rgb(255, 0, 0)')) {
//             console.log('测试通过!');
//         } else {
//             console.log('CSS样式测试失败!');
//         }
//     } else {
//         console.log('文本测试失败!');
//     }
// } else {
//     console.log('节点测试失败!');
// }

// ------------------------- 插入 DOM

var js;
var list;  
js = document.getElementById('js');
list = document.getElementById('list');
  list.appendChild(js);

// var
//     js = document.getElementById('js'),
//     list = document.getElementById('list');
// list.appendChild(js);

console.log(js);
console.log(list);

创建一个新节点

var list;
var haskell;
   list = document.getElementById('list');
   haskell=document.createElement('p');
   haskell.id='haskell';
   haskell.innerHTML='Haskell';
   list.appendChild(haskell);

   console.log(haskell);
  
  //------------------ 删除 DOM节点

//   var parent = document.getElementById('parent');
//   parent.removeChild(parent.children[0]);
  
//   console.log(parent);

//  // 把与Web开发技术不相关的节点删掉：

//    var parent=document.getElementById('test-list');
//    parent.removeChild(parent.children[1]);
//    parent.removeChild(parent.children[2]);
//    parent.removeChild(parent.children[3]);
//   // TODO

// // 测试:
// (function () {
//   var
//       arr, i,
//       t = document.getElementById('test-list');
//   if (t && t.children && t.children.length === 3) {
//       arr = [];
//       for (i = 0; i < t.children.length; i ++) {
//           arr.push(t.children[i].innerText);
//       }
//       if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
//           console.log('测试通过!');
//       }
//       else {
//           console.log('测试失败: ' + arr.toString());
//       }
//   }
//   else {
//       console.log('测试失败!');
//   }
// })();

 // 需要注意的是 删除多个节点的时候 children(孩子的意思)属性时刻都在变化。调用父节点(removeChild)把自己删除掉(children)--字节点


 //------------- 操作 DOM

 // 返回ID为'test'的节点：

// var test = document.getElementById('test');

// // 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
// var trs = document.getElementById('test-table').getElementsByTagName('tr');

// // 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
// var reds = document.getElementById('test-div').getElementsByClassName('red');

// // 获取节点test下的所有直属子节点:
// var cs = test.children;

// // 获取节点test下第一个、最后一个子节点：
// var first = test.firstElementChild;
// var last = test.lastElementChild;

//  ---------------------

  // 选择<p>JavaScript</p>:

// var js =document.getElementsByClassName('c-red').getElementById('test-p');
var js = document.getElementById('test-p');

console.log(js);
  


// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:

var arr =document.getElementsByClassName('c-red c-green')[0].children;

console.log(arr);

// 选择<p>Haskell</p>:
// var haskell=c-green.lastElementChild;
// var cgreen=document.getElementsByClassName('c-green');
// console.log(cgreen);


// 选择<p>Haskell</p>:
 
let haskell = document.getElementsByClassName('c-green')[1].lastElementChild;
console.log(haskell);

// 测试:
if (!js || js.innerText !== 'JavaScript') {
    alert('选择JavaScript失败!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
    console.log('选择Python,Ruby,Swift失败!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
    console.log('选择Haskell失败!');
} else {
    console.log('测试通过!');
}



  

